<template>
  <div>
    <div class="bg-white shadow-1">
      <item-top :id="id" @selectSite="selectSite"></item-top>
    </div>
    <div style="margin-top:10px;" class="bg-white shadow-1">
      <q-card>
        <q-tabs
          v-model="tab"
          dense
          class="bg-grey-2 text-teal"
          active-color="primary"
          indicator-color="primary"
          align="left"
          narrow-indicator>
            <q-tab name="site" label="地点视图" />
        </q-tabs>
        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="site" style="padding:0px;">
            <Category :selectSiteId="selectSiteId"></Category>
          </q-tab-panel>
        </q-tab-panels>
      </q-card>
    </div>
  </div>
</template>

<script>
import ItemTop from './ItemTop' // 公共头部
import Category from './Category' // 公共品类
export default {
  components: {
    ItemTop,
    Category
  },
  data () {
    return {
      // 选项卡
      tab: 'site',
      groupId: '',
      // 选择的Id
      selectSiteId: []
    }
  },
  validations: {
  },
  watch: {
    'tab' () {
      if (this.selectSiteId.length === 0) {
        this.tab = 'site'
        this.$q.notify({
          message: '请选择维护地点!',
          color: 'negative',
          icon: 'error_outline',
          position: 'top-right',
          timeout: 3000
        })
      }
    },
    'selectSiteId' () {
      if (this.selectSiteId.length === 0) {
        this.tab = 'site'
        this.$q.notify({
          message: '请选择维护地点!',
          color: 'negative',
          icon: 'error_outline',
          position: 'top-right',
          timeout: 3000
        })
      }
    }
  },
  created () {
    this.id = this.$route.params.id
    if (this.selectSiteId.length === 0) {
      this.tab = 'site'
    }
  },
  methods: {
    selectSite (v) {
      console.log(v)
      if (v.length === 0) {
        this.selectSiteId = []
        this.groupId = ''
        console.log('1111111111111')
        this.tab = 'site'
        this.$q.notify({
          message: '请选择维护地点!',
          color: 'negative',
          icon: 'error_outline',
          position: 'top-right',
          timeout: 3000
        })
      } else {
        this.selectSiteId = v[0].id
        this.groupId = v[0].groupId
      }
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
